
<template>
    <div>
            <table class="tb">
                <tr>
                    <th>
                        <!-- <label for="all">全选</label> -->
                        <!-- 绑定model -->    
                    <input type="checkbox" @click="handleCheckAllChang" v-model="checkAll" >
                     
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                    <tr v-for="(item,i) of goodsList" :key="item.id">
                            <td>
                                <!-- item数据的每一项 -->
                        <input type="checkbox"  v-model="checkArr" :value="item">
                            </td>
                            <td>
                        <img id="img" :src="item.pic"/>
                    </td>
                    <td>{{item.code}}</td>
                    <td id="ts">{{item.title}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <!-- 注册点击事件 -->
                        <button @click="decrease(item)">-</button>
                        &nbsp;
                        <b>{{item.quantity}}</b>
                        &nbsp;
                        <!-- item获取里面的每一项 -->
                        <button @click="progressively(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(i)">删除</button>
                    </td>
                    </tr>


                </table>
<!-- {{checkAll}} -->
<div id="total add">
<h1 style="text-align: right;">总价格:
    <b style="color: red">{{total}}</b>
</h1>
</div>
</div>
</template>

<script>
export default{

    data(){
        return{
            //定义一个空数组
            checkArr:[],
            checkAll:false,
            // total:"0.00",
        }
    },
    computed: {
     total(){
        //未勾选商品
        if(this.checkArr.length ==0){
            return "0.00"
        }else{
            //选中商品
            console.log(this);
          return  this.checkArr.reduce((total,item)=>{
             return   (total += item.price*item.quantity)
            },0).toFixed(2);
        }
     }   
    },
   
    watch:{
        //观察checkArr的变化 只要checkArr的数组长度和goodsList的数组长度一直 说明全部被选中了 需要把checkArr的值设置为true 不然就设置false
        checkArr(newCheckArr){
            if(this.goodsList.length ===newCheckArr.length){
                //需要把checkArr设置为true
                this.checkAll = true

            }else{
                //没有被全选
                this.checkAll = false
            }
        },
        target:{//响应props target数据的变化
            handler(newVal){
                //删除checkArr对应的数据就可以了
                // console.log("sss"+newVal);
                let id = newVal.id  //传递过来的被删除的id
                //过滤掉当前数组中id和传过来id 相等的对象
                this.checkArr = this.checkArr.filter(item=>{
                 return   item.id!==id 
                })
            },
            deep:true
        }
    },
    //方法
    methods:{

        //处理点击全选按钮的逻辑
        handleCheckAllChang(e){
            // console.log();
            let newAll = e.target.checked;

            //直接判断newval如果是true 便是全选
                //直接让checkArr等于goodslist
                if(newAll){
                    this.checkArr =this.goodsList;
                }else{
                    this.checkArr = []
                }
        },

        //递减
        decrease(item){
            //判断小于一就返回
            if(item.quantity<=1){
                return
            }
            item.quantity--     
        },
        //递增
        progressively(item){
            item.quantity++;
        },
        //删除
        del(i){
            this.$emit('del',i)
        }
    },
    props:{

        //接收删除的数据
        target:{
            type:Object
        },

        //接收的数据
        goodsList:{
            type:Array,
            default(){
                return []
            }
        }
    }
}

</script>

